<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    append-to-body
    :before-close="beforeClose"
    top="30px"
    width="900px"
  >
    <el-form inline>
      <el-form-item label="时段查询:" class="ml-3">
        <el-date-picker
          style="width: 150px"
          v-model="timeStart"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="查询开始时间"
        ></el-date-picker>
        <span class="px-1">至</span>
        <el-date-picker
          style="width: 150px"
          v-model="timeEnd"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="查询结束时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <select-video-list
          :farm-id="farmId"
          v-model="params['device.eq']"
          @change="getCapture()"
          clearable
          placeholder="设备名称查询"
        ></select-video-list>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          class="ml-1"
          :loading="loading"
          @click="handleDateChange()"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div v-loading="loading">
      <img-card :images="captures"></img-card>
    </div>
    <p class="p-5 text-center text-muted border rounded" v-if="showEmpty">暂无图片资料</p>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getCapture"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import ImgCard from '@/components/ImgCard'
import SelectVideoList from '@/credit/components/select/SelectVideoList'
export default {
  components: {
    ImgCard,
    SelectVideoList,
  },
  props: {
    visible: Boolean,
    farmId: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      timeStart: '',
      timeEnd: '',
      loading: false,
      tableName: 'video_capture',
      params: {
        index: 1,
        size: 14,
      },
      captures: [],
      totalCount: 0,
    }
  },
  computed: {
    showEmpty() {
      return !this.loading && this.captures.length === 0
    },
  },
  watch: {
    farmId: {
      handler: function () {
        this.getCapture()
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    getCapture(index = 1) {
      this.params.index = index
      if (!this.farmId) {
        return
      }
      this.params['customer_id.eq'] = this.farmId
      this.loading = true
      this.captures = []
      this.$api
        .getData('iot', this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          const data = res?.data?.data ?? []
          this.totalCount = res?.data?.totalCount ?? 0
          data.forEach(it => {
            this.captures.push(it.pic_url)
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    // 时段查询
    handleDateChange() {
      this.params['create_time.gte'] = this.$utils.dateFormat(this.timeStart, 'yyyy-MM-dd')
      this.params['create_time.lt'] = this.$utils.dateFormat(this.timeEnd, 'yyyy-MM-dd')
      if (!this.timeStart) {
        this.params['create_time.gte'] = ''
      }
      if (!this.timeEnd) {
        this.params['create_time.lt'] = ''
      }
      this.getCapture()
    },
  },
}
</script>
<style lang="scss" scoped></style>
